<template>
  <div class="wrap">
    <!-- banner end -->
    <div class="main">
      <div class="mainl left">
        <div class="cpfl">
          <h2><img src="../../../src/assets/upfiles/xwdt.png"></h2>
          <div class="flcon">
            <ul>
              <li><a href="/adc">新闻1</a></li>
              <li><a href="">新闻2</a></li>
              <li><a href="">新闻3</a></li>
            </ul>
          </div>
        </div>
        <!-- cpfl end -->
        <div class="ny_lx mt15">
          <h2><img src="../../../src/assets/upfiles/ny_lx.png" alt="联系我们"></h2>
          <div class="lxbox"><strong style=" color:#fbc800; font-size:14px;">学远培训有限公司</strong><br/>
            地址：安徽信息工程学院<br/>
            联系人：潘经理<br/>
            电话：0371-687666666<br/>
            手机：17355370221<br/>
            邮箱：919819426@qq.com
          </div>
        </div>
        <!-- ny_lx end -->
      </div>
      <div class="mainr right">
        <h2><span class="ny_nav">您当前所在的位置：<a href="">首页</a> &gt; 课程展示</span>课程展示</h2>
        <div class="cp_list">
          <ul>
            <li v-for="(item, index) in course" :key="item.no" @click="goVideo(item)">
              <a href="javascript:;">
                <img :src="item.src" />
                <p>{{ item.name }}</p>
              </a>

            </li>
          </ul>

          <div class="clear"></div>
          <div class="page">共1页每页6个 <a href="#">首页</a> <a href="#">上一页</a> <a href="#">下一页</a> <a href="#">尾页</a>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>

    export default {
        name: "Course",
        data(){
            return {
                course:[],
                // 定义数据
                api_url: 'http://www.xueyuanjiaoyu.com/api/'
            }
        },
        // 页面加载完成执行这里面的方法，一般用于ajax请求数据接口
        mounted(){
            // 获取数据
            this.$axios.get(this.api_url + 'home/kczs').then(res => {
                this.course = res.data.data
            })
        },
        methods: {
            goVideo(item){
                this.$router.push({path: '/video', query:{no: item.no, name: item.name}})
            }
        }
    }
</script>

<style scoped>
  /*---------------    首页样式 ----------------*/
  .wrap{ width:1280px; height:auto; margin:0 auto;}
  .top{  width:900px; height:200px; margin:0 auto;}
  .top p{ text-align:right; padding:70px 15px 0 0; color:#858585;}
  .top p a{ color:#858585; margin:0 5px;}
  .menu{ width:auto; height:71px;  }
  .nav{ width:1000px; line-height:71px; margin:0 auto; font-size:16px;}
  .nav li{ float:left;   text-align:center; width:120px; padding:0 10px; display:inline;}
  .nav li a{ color:#fff;}

</style>
